<template>
  <div id="thermodynamic"></div>
</template>

<script setup>
import { onMounted, defineProps, watch, defineEmits } from "vue";
import { getBaseMap } from "@/api/bjBuilding";
import liaoning from "@/utils/liaoning.json";
import { pxToRem } from "@/utils/pxToRem";
import * as echarts from "echarts";

var option;
var myChart;
var dataList;
var cityName;

const props = defineProps({
  cityNames: {
    type: String,
  },
  dataIndex: {
    type: Number,
  },
});

watch(
  () => props.cityNames,
  (val) => {
    myChart.dispatchAction({
      type: "unhighlight", // 取消高亮
      seriesIndex: props.dataIndex,
    });
  }
);

const emit = defineEmits(["getCity-Name"]);

// 获取地图数据
const useGetBaseMap = async () => {
  await getBaseMap(cityName).then((res) => {
    if (res.code == 0) {
      dataList = res.data;
      dataList.forEach((element) => {
        item.bool = false;
      });
    }
  });
};

const useCharts = () => {
  var chartDom = document.getElementById("thermodynamic");
  echarts.registerMap("GD", { geoJSON: liaoning });
  myChart = echarts.init(chartDom);

  option = {
    geo: {
      map: "GD",
      roam: false, //禁止地图移动
      scaleLimit: {
        min: 1,
        max: 2,
      },
      // zoom: 1.13,
      top: pxToRem(55),
      label: {
        show: true,
        fontSize: pxToRem(17),
        color: "#Ffffff",
      },
      itemStyle: {
        borderColor: "rgba(67, 128, 240, 1)",
        color: "#4380F0",
      },
      emphasis: {
        areaColor: "rgba(35, 99, 150,0.1)",
        //  areaColor: "#f2d5ad",
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        borderWidth: 0,
      },
    },
    series: [
      {
        name: "确诊病例",
        type: "map",
        geoIndex: 0,
        data: dataList,
        itemStyle: {
          normal: {
            color: "#4380F0",
          },
        },
      },
    ],
  };

  myChart.on("click", function (params) {
    let str = {
      cityName: params.name,
      dataIndex: params.dataIndex,
    };
    emit("getCity-Name", str);
  });
  option && myChart.setOption(option);
};

onMounted(() => {
  useCharts();
  window.addEventListener("resize", () => {
    useCharts();
    myChart.resize();
  });
});
</script>

<style lang="less" scoped>
#thermodynamic {
  width: 100%;
  height: 100%;
}
</style>
